<template>
    <div class="model-config-container">
      <h1>大模型信息配置</h1>
      
      <div class="form-group">
        <label for="scene-name">*场景名称：</label>
        <input 
          id="scene-name" 
          type="text" 
          v-model="scenarioName" 
          placeholder="更多探索"
          class="form-input"
        >
      </div>
      
      <div class="form-group">
        <label for="algorithm-name">*算法名称：</label>
        <input 
          id="algorithm-name" 
          type="text" 
          v-model="algorithmName" 
          placeholder="大模型交互"
          class="form-input"
        >
      </div>
      
      <div class="form-group">
        <label for="algorithm-desc">*算法描述：</label>
        <input 
          id="algorithm-desc" 
          type="text" 
          v-model="algorithmDesc" 
          placeholder="运用大模型检测图像目标"
          class="form-input"
        >
      </div>
      
      <div class="form-group">
        <label for="api-url">*api地址：</label>
        <input 
          id="api-url" 
          type="text" 
          v-model="apiAddress" 
          class="form-input"
        >
      </div>
      
      <button class="save-button" @click="saveConfig">保存</button>
    </div>
  </template>
  
  <script lang="ts" setup>
  import { ref , onMounted} from 'vue';
  import request from '@/utils/request';
  import { ElMessage } from 'element-plus'

  
  const scenarioName = ref('');
  const algorithmName = ref('');
  const algorithmDesc = ref('');
  const apiAddress = ref('');
  

  const saveConfig = () => {

    request.post('algorithm/insertLargeModel',{
        id:'',
        scenarioName: scenarioName.value,
        algorithmName: algorithmName.value,
        algorithmDesc: algorithmDesc.value,
        apiAddress: apiAddress.value
    }).then(res=>{
       if(res.data.status == "fail"){
        ElMessage.error(`保存，请检查网络后重试`)
       }else {
        ElMessage({
        message: '保存成功',
        type: 'success',
  })    
       }
    });
    }


    const getLargeModel = () =>{
        request.get('algorithm/getLargeModel').then(res => {
                scenarioName.value = res.data.scenarioName;
                algorithmName.value  = res.data.algorithmName;
                algorithmDesc.value  = res.data.algorithmDesc;
                apiAddress.value  = res.data.apiAddress;
             })
    }

    onMounted(()=>{
        getLargeModel()
  })

  </script>
  
  <style scoped>
  .model-config-container {
    max-width: 700px;
    padding: 40px;
    font-family: Arial, sans-serif;
    background-color: #fff;
  }
  
  h1 {
    font-size: 24px;
    text-align: center;
    margin-bottom: 20px;
    color: #333;
  }
  
  .form-group {
    margin-bottom: 15px;
    display: flex;
    align-items: center;
  }
  
  label {
    width: 120px;
    font-size: 16px;
    color: #333;
  }
  
  .form-input {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
  }
  
  .save-button {
    display: block;
    width: 100%;
    margin-top: 30px;
    padding: 10px 20px;
    background-color: #1890ff;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    cursor: pointer;
  }
  
  .save-button:hover {
    background-color: #40a9ff;
  }
  </style>